<template>
    <el-main>
        <el-card class="ep-card ep-search">
            <el-form :model="searchForm" label-width="70px">
                <el-row :gutter="0">
                    <el-col :span="8">
                        <el-form-item label="流程名称">
                            <el-input v-model="searchForm.name" placeholder="请输入流程名称" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="项目编号">
                            <el-input v-model="searchForm.projectCode" placeholder="请输入项目编号" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <!-- <el-col :span="8">
                        <el-form-item label="项目名称">
                            <el-input v-model="searchForm.projectName" placeholder="请输入项目名称"></el-input>
                        </el-form-item>
                    </el-col> -->
                </el-row>
                <el-row :gutter="0">
                    <el-col  style="text-align:right">
                      <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
                    </el-col>
                </el-row>    
            </el-form>
        </el-card>
        <el-card class="ep-card" style="height: calc(100vh - 280px);">
            <el-row style="margin-top: 10px;">
                <el-table
                    :data="tableData"
                    border
                    :height="height" 
                    style="width: 100%">
                    <el-table-column
                        type="index"
                        label="序号"
                        align="center"
                        width="50">
                    </el-table-column>
                    <el-table-column
                        prop="projectCode"
                        align="center"
                        label="项目编号">
                    </el-table-column>
                    <el-table-column
                        prop="projectName"
                        align="center"
                        label="项目名称">
                    </el-table-column>
                    <el-table-column
                        prop="name"
                        align="center"
                        label="流程名称">
                    </el-table-column>
                    <el-table-column
                        prop="status"
                        align="center"
                        width="120"
                        label="状态">
                        <template slot-scope="scope">
                            <div v-for="item in instanceState" :key="item.key">
                                    <span v-if="item.key==scope.row.state" :style="item.style">
                                        {{item.label}}
                                    </span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="createDate"
                        align="center"
                        width="120"
                        label="开始时间" type="date" :formatter="dateFormatter">
                    </el-table-column>
                    <el-table-column
                        prop="name"
                        align="center"
                        label="执行情况"
                        width="150">
                        <template slot-scope="scope">
                           <el-button type="text"  @click="progress(scope.row)">进展</el-button>
                           <el-button type="text"  @click="showDetail(scope.row)">项目明细</el-button>
                        </template>
                    </el-table-column>
                    
                    <el-table-column
                        prop="name"
                        align="center"
                        label="操作"
                        width="180">
                        <template slot-scope="scope">
                            <el-button type="text" :disabled="scope.row.state !== '1'" @click="doPause(scope.row)">暂缓</el-button>
                            <el-button type="text" :disabled="scope.row.state !== '2'" @click="doResume(scope.row)">恢复</el-button>
                            <el-button type="text" :disabled="scope.row.state === '3'|| scope.row.state === '4'" @click="doEnd(scope.row)">终止</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    v-show="tableData.length > 0"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pager.page"
                    background
                    :page-sizes="[20, 40, 60, 80]"
                    :page-size="pager.size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pager.total">
                </el-pagination>
            </el-row>
        </el-card>
        <el-dialog  title="项目信息" :visible.sync="designerVisible" width="70%">
                <projHandleDisplay ref="projHandleDisplay"></projHandleDisplay>
        </el-dialog>
    </el-main>
</template>
<script src="@/pages/flow/js/workflowInstance.js"></script>
